<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录窗</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4336200_bq5yqjlff9r.css">
</head>
<body>
    <div class="login">
        <div class="login__header">
            <div class="login__header-back">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="login__header-title">
                <i class="iconfont icon-netease-cloud-music-fill"></i>
                <span>网易云音乐</span>
            </div>

        </div>
        <div class="login__body">
            <input type="text" required placeholder="登录邮箱">
            <input type="password" required placeholder="密码">
            <button>登录</button>
            <a href="">重设密码</a>

        </div>

        <div class="Toast">
                登录成功
            <i class="iconfont icon-dagou"></i>
        </div>




    </div>
    <script>
        // 获取元素
        var emailInput = document.querySelector('input[placeholder="登录邮箱"]');
        var passwordInput = document.querySelector('input[placeholder="密码"]');
        var loginButton = document.querySelector('button');

        // 定义一个函数，检查输入框是否都有内容
        function checkInputs() {
            if (emailInput.value && passwordInput.value) {
                // 如果两个输入框都有内容，使登录按钮亮起来
                loginButton.style.backgroundColor = 'red';
                loginButton.disabled = false;
            } else {
                // 否则，使登录按钮变暗
                loginButton.style.backgroundColor = '';
                loginButton.disabled = true;
            }
        }

        // 监听输入框的 input 事件
        emailInput.addEventListener('input', checkInputs);
        passwordInput.addEventListener('input', checkInputs);

        // 页面加载时，检查输入框是否都有内容
        checkInputs();
        // 定义一个函数，处理登录事件
        function handleLogin() {
            var username = emailInput.value;
            var password = passwordInput.value;
                // 检查两个输入框是否都有内容
            if (!username || !password) {
                return ; // 如果有一个输入框没有内容
            }

            //发送请求
            fetch(`http://192.168.31.45:3000/login?username=${username}&password=${password}`)
                .then(response => response.json())//响应体
                .then(data => {
                    if (data.success) {
                        alert(data.message);
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                // 处理错误
                alert('请求失败：' + error.message);
                })
        }
        // 监听登录按钮的 click 事件
        loginButton.addEventListener('click', handleLogin);
        // 监听输入框的 keydown 事件
        emailInput.addEventListener('keydown', function(event) {
            if (event.keyCode === 13) {
                handleLogin();
            }
        });
        passwordInput.addEventListener('keydown', function(event) {
            if (event.keyCode === 13) {
                handleLogin();
            }
        });
    </script>
</body>
</html>